<template>
  <div>
    <!-- 商品搜索 -->
    <div class="category-head">
      <div class="category-head-c" @click="categorySearch">
        <span class="icon"><van-icon name="search" /></span>
        <span>商品搜索,共{{ categorynum }}款好物</span>
      </div>
    </div>
    <div class="category-content">
      <div class="category-content-l">
         <!-- 居家商品 左侧边栏 -->
        <van-sidebar @change="onChangeCategory" v-model="activeKey" v-for="item in categoryList" :key="item.id"> 
          <van-sidebar-item :title="item.name" v-for="item in item" :key="item.id"/>
        </van-sidebar>
      </div>
      <!-- 右侧内容 -->
      <div class="category-content-c">
        <!-- 右侧图片 -->
        <div class="banner">
          <img :src="itemList.banner_url" width="100%" height="100" />
        </div>
        <!-- 商品显示区域  -->
        <div class="title">
           <p>__{{itemList.name}}分类__</p>
        </div>
        <div class="botton" >
            <div class="item" v-for="item in itemList.subList" :key="item.id" @click="gocategoryist(item.id)">
              <img :src="item.wap_banner_url" />
              <p>{{item.name}}</p> 
            </div>
            
        </div>
       
      </div>
    </div>

    <div class="p"></div>
    <van-tabbar route>
      <!-- replace 跳转是否替换当前页面 -->
      <!-- to 跳转路由 -->
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" icon="description"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { category,currentaction } from "@/api/category/listaction.js";
export default {
  data() {
    return {
      //获取产品数据category
      categoryList: [],
      //获取部分产品数据
      itemList:[],
      activeKey: 0,
      //共有多少商品
      categorynum: 0,
      //获取分类id查询
      id:1005000,
    };
  },
  methods: {
    getcategory(){
      category().then(res=>{
        console.log(res)
        this.categoryList=res
        // console.log(this.categoryList)
      });
      currentaction({
        id:this.id
      }).then(res=>{
        console.log(res)
        this.itemList=res.data.currentOne
        console.log(this.itemList)
      })
    },
    //侧边栏监听
    onChangeCategory(index){
      this.id=this.categoryList.categoryList[index].id;
      // console.log(this.categoryList.categoryList[index].id)
      console.log(this.id)
      this.getcategory();
      // currentaction({
      //   id:this.id
      // }).then(res=>{
      //   // console.log(res)
      //   this.itemList=res.data.currentOne
      //   console.log(this.itemList)
      // })
    },
    // 搜索框点击跳转
    categorySearch(){
      this.$router.push({name:'search'})
    },
    gocategoryist(key){
      console.log(key)
      var keyId=key;
      localStorage.setItem('keyId',keyId)
      this.$router.push({name:'categorylist'})
    }
  },
  created(){
      this.getcategory();
    },
    mounted() {

    },
};
</script>
<style lang="scss" scoped>
.category-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 0px;
  height: 45px;
  z-index: 99;
  background-color: #fff;
  .category-head-c {
    width: 90%;
    height: 75%;
    margin: 0 auto;
    background-color: #ededed;
    border-radius: 2px;
    span {
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      margin-right: 5px;
    }
  }
}
.category-content{
  margin-top:45px;
  width: 100%;
  height: 650px;
  .category-content-l{
    float: left;
    width: 80px;
    height: 100%;
  }
  .category-content-c{
    width:calc(100% - 90px);
    height: 100%;
    float: left;
    .banner{
      padding: 0 10px;
    }
    .title{
      padding: 0 10px;
      text-align:center;
    }
    .botton{
      padding: 0 20px;
      .item{
        float: left;
        width: 33.33%;
        text-align: center;
        img{
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
.p {
  height: 50px;
  background-color: #f4f4f4;
}
</style>